<template>
  <div >
    <div class="wai" :style="backgroundStyle">
      <div class="biaoti"><h1>欢迎汽车服务程序</h1></div>
    <div class="kuang1" style="width: 300px;height: 250px;">
    <br>
    <van-form @submit="onSubmit">
      <div class="yanshi1">
      <van-field class="yanse"
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
    </div>
      <div class="yanshi2">
      <van-field class="yanse1"
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      </div >
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
      <div class="you"><a href="/public#/zhuce">没有账号？马上注册</a></div>

    </div>
    </div>
  </div>
</template>

<script>
import  {serverUrl} from '@/utils/request';
export default {
  data() {
    return {
      imageUrl: 'https://hh666.oss-cn-beijing.aliyuncs.com/th.jpg' ,// 替换为你的图片路径
      username: '',
      password: '',
      form: {},
    }
  },
  methods: {
    onSubmit() {
      this.form.username = this.username
      this.form.password = this.password
      console.log(this.form)
      this.axios.post(serverUrl+`/api/qcfw-user/user/login`, this.form).then(res => {
        if (res.data.code == 200) {
          // sessionStorage.setItem('token', res.data.data)
          localStorage.setItem('token', res.data.data)
          var expirationTime = 3600000; // 1小时，单位为毫秒，你可以根据需要设置
          setTimeout(function() {
            localStorage.removeItem('token');
          }, expirationTime);
          this.$message.success("欢迎回来")
          this.$router.push('/shouye')
        } else {
          this.$message.error("用户名或密码错误")
        }
      })
    },
  },
  created() {
    localStorage.removeItem('token');
  },
  computed: {
    backgroundStyle() {
      return {
        backgroundImage: `url(${this.imageUrl})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        height: '100vh',
        width: '100%'
      };
    }
  }
}
</script>

<style scoped>
.biaoti{
  text-align: center;
  padding-top: 20%;
  color: #171616;
}
.wai{
  width: 100%;
  height: 100%;
  border: 1px solid #171616;
}
.kuang1{
  //border: 1px solid #171616;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.yanse{
  background-color: rgba(0,0,0,0);
}
.you{
  padding-top: 40px;
  text-align: right;
}
.yanse1{
  background-color: rgba(0,0,0,0);
}
.yanshi1{
  padding-bottom: 10px;
  color: #171616;
}
a{
  color: #39a9ed;
}
</style>
